<template>
    <div class="userInfo">
        <p style="text-align: center;"><strong>用户基本资料</strong></p>       
        <p>用户名:<strong>{{ state.user_info.username }}</strong>（用于登录,不可修改）</p>
        <p>真实姓名:<strong>{{ state.user_info.real_name }}</strong>（用于后台审核,不可修改）</p>
        <p>昵称：<strong>{{ state.user_info.nickname }}</strong>(用于显示题目录入者)<el-button type="warning" text  @click="modifyNicknameClick">(点击修改)</el-button></p>
        <p>绑定手机：<strong>{{ state.user_info.phone }}</strong>（用于登录）<el-button type="warning" text @click="handleUnbundlePhoneClick">(点击解绑)</el-button></p>
        <p>会员等级：<strong>{{ state.user_info.VIP_cn }}</strong><el-button type="success" text @click="handleUpgradeVipClick">（我要升级）</el-button></p>
        <p v-if="state.user_info.is_staff">是否管理员：<strong>是</strong></p>
        <p v-else>是否管理员：<strong>否</strong></p>
        <p>库币积分：<strong>{{ state.user_info.bank_point }}</strong></p>
        <div>
          邀请注册链接：<el-text>{{ state.shareRegistereString }}</el-text>
          <el-button type="success" @click="copy(state.shareRegistereString)">复制到剪切板</el-button>
        </div>
    </div>
    <div>
        <el-dialog v-model="state.modifyNicknameDialogFormVisible" title="修改昵称，注意文明用于，不可使用低俗词语、违反爱国、带政治立场等词语">
            <el-form :model="state.modifyNicknameDialogForm" :rules="state.rules" ref="modifyNicknameDialogFormRef">
                <p>旧昵称：<strong>{{ state.user_info.nickname }}</strong></p>
                <el-form-item label="新昵称：">
                    <el-input v-model="state.modifyNicknameDialogForm.nickname" autocomplete="off" />
                </el-form-item>        
            </el-form>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="state.modifyNicknameDialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submmitModifyNicknameClick">
                    确认
                </el-button>
            </span>
            </template>
        </el-dialog>
    </div>    
</template>
  
<script setup>
import axios from '@/utils/axios'
import { reactive, ref } from 'vue'
import { localSet, localGet, imageUrlPrefix } from '@/utils'
import { onMounted } from "@vue/runtime-core"
import { ElMessage } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'

const modifyNicknameDialogFormRef=ref(null)
const state = reactive({
    shareRegistereString: 'https://xxjstk.top/#/signin?inviter=',
    user_info: Object,
    modifyNicknameDialogFormVisible: false,    
    modifyNicknameDialogForm: {
        nickname:""
    },
    rules: { // 规则
      nickname: [
        {required: 'true', message: '请填写昵称', trigger: ['change']}
      ]
    },
})
onMounted(()=>{ 
    // console.log('用户信息：', localGet("user_information"))
    state.user_info=localGet("user_information")
    state.shareRegistereString =  state.shareRegistereString + state.user_info.phone
})
// 解绑手机
const handleUnbundlePhoneClick=()=>{
    ElMessage.warning("待开发")
}
// 打开修改昵称对话框
const modifyNicknameClick=()=>{
    state.modifyNicknameDialogFormVisible=true
}
// 升级会员
const handleUpgradeVipClick=()=>{
    ElMessage.warning("待开发")
}
// 提交修改昵称表单
const submmitModifyNicknameClick=()=>{
    modifyNicknameDialogFormRef.value.validate((vaild, obj) => {
      if (vaild) {
        let params = {                  
          nickname: state.modifyNicknameDialogForm.nickname,        
        }       
        axios.post(`/UserNicknameApplicationModelViewSet/`, params).then((result) => {
          if(result.code==200){
          ElMessage.success( '操作成功！')
          state.modifyNicknameDialogFormVisible=true
          }else{
            console.log("提交昵称错误", result)
          }       
        }).catch((error)=>{
          console.log("修改昵称错误：", error)
        })
      }else{                //输出表单没有通过的原因
        console.log("表单没有通过！",obj)
        for (let key in obj) {
          console.log(obj[key][0].message)
          return false;
        }   
      }
    })
  }
  //复制到剪切板
const copy=(text)=>{
  // text是复制文本
  // 创建input元素
  const el = document.createElement('input')
  // 给input元素赋值需要复制的文本
  el.setAttribute('value', text)
  // 将input元素插入页面
  document.body.appendChild(el)
  // 选中input元素的文本
  el.select()
  // 复制内容到剪贴板
  document.execCommand('copy')
  // 删除input元素
  document.body.removeChild(el)
  ElMessage.success("复制成功，发给好友注册去吧！")
  // alert('复制成功')
}

</script>

<style scoped>
    .userInfo{
        border-style: solid;
        border-radius: 3px;
    }
</style>